<template>
    <section class="content">
        <Panel :expandable="false" :expand="true">
            <template slot="title">审查查询</template>
            <template slot="body">
                <el-form label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="申请名称">
                                <el-input v-model="applyName" placeholder="请输入申请名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="申请日期">
                                <el-date-picker
                                    v-model="applyDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期" class="full-cell">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" style="padding-left: 12px">
                            <el-button type="success" @click="handleSearch">搜索</el-button>
                            <el-button type="primary" @click="handleApply">提款申请</el-button>
                            <el-button type="primary" @click="handleRefreshStatus">状态查询</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </Panel>
        <Panel :expandable="false" :expand="true">
            <template slot="title">订单总金额：{{totalAmount}}</template>
            <template slot="body">
                <el-table :data="list" header-row-class-name="header-class">
                    <el-table-column align="center" prop="applyNo" label="申请编号">

                    </el-table-column>
                    <el-table-column align="center" prop="applyName" label="申请名称">

                    </el-table-column>
                    <el-table-column align="center" prop="vendorId" label="供应商编号">

                    </el-table-column>
                    <el-table-column align="center" prop="paymentAmount" label="申请金额">

                    </el-table-column>
                    <el-table-column align="center" prop="paymentTypeStr" label="付款类型">

                    </el-table-column>
                    <el-table-column align="center" prop="paymentRatio" label="付款比例">

                    </el-table-column>
                    <el-table-column align="center" label="付款单编号" width="200px">
                        <template  slot-scope="scope">
                            <el-button type="text" :title="scope.row.paymentNo" @click="handlePaymentNo(scope.row)">{{scope.row.paymentNo}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="paymentStatusStr" label="支付状态">

                    </el-table-column>
                    <el-table-column align="center" prop="clearStatusStr" label="清算状态">

                    </el-table-column>
                </el-table>

                <div class="clear-fix">
                    <el-pagination
                        style="float: right; margin-top: 20px;"
                        background
                        layout="total, prev, pager, next"
                        @current-change="handleCurrentChange"

                        :current-page="searchParam.page"
                        :total="searchParam.total">
                    </el-pagination>
                </div>
            </template>
        </Panel>

        <el-dialog title="提款申请" :visible.sync="visible" width="1200px">
            <PaymentAudit v-if="visible"  @commited="handleCommited"></PaymentAudit>
             <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="付款单编号详情" class="payment-info" :visible.sync="paymentInfoVisible" width="400px">
            <PaymentInfo :value="paymentInfo"></PaymentInfo>
            <div slot="footer" class="dialog-footer">
                <el-button @click="paymentInfoVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
/*
1. 缺少订单编号字段
*/
import Panel from '@/components/common/panel'
import instance from '@/api/index.js'
import apiUrls from '@/js/common/apiUrls'
import PaymentAudit from './paymentAudit'
import PaymentInfo from './paymentInfo'

// 支付审核
export default {
    name: "paymentAuditList",
    data() {
        return {
            visible: false,
            paymentInfoVisible: false,
            // totalAmount: 0,
            applyName: "",
            applyDate: "",
            list: [],
            searchParam: {
                page: 1,
                rows:  10,
                total: 0
            },
            paymentInfo: {

            }
        };
    },
    components: {
        Panel,
        PaymentAudit,
        PaymentInfo
    },
    methods: {
        handleSearch() {
            this.searchParam.page = 1;
            this.getList();
        },

        handleApply() {
            this.visible = true;
        },

        getList() {
            let self = this;
            let param = Object.assign({
                page: this.searchParam.page,
                rows: this.searchParam.rows,
                applyName: this.applyName,
                applyTime: this.applyDate,
            });

            instance({
                method: 'post',
                url: apiUrls.receive.paymentAuditList,
                params: param
            }).then(function (data) {
                console.log("data:", data);
                if(data.data.success){
                    // 映射状态
                    self.list = data.data.data.list.map((item)=>{
                        let paymentStatusMap = {
                            "00": "待支付",
                            "05": "资金清算处理中",
                            "06": "已完成",
                            "07": "已退汇",
                            "08": "资金业务处理中",
                            "13": "批量提款待审核",
                            "14": "批量提款失败(待退汇)",
                            "15": "资金已入担保账户",
                            "16": "收汇背景待审核",
                            "17": "收汇背景审核失败"
                        };
                        let clearStatusMap = {
                            "001": "已入账(结算户)",
                            "002": "已入账(待核查账户)",
                            "003": "已退汇",
                            "004": "资金业务处理中",
                            "005": "已入账(担保户)"
                        };
                        let paymentTypeMap = ["", "比例", "金额"];

                        item.paymentTypeStr = paymentTypeMap[item.paymentType] || "";// 1: 比例 2：金额
                        item.paymentStatusStr = paymentStatusMap[item.paymentStatus] || "";
                        item.clearStatusStr = clearStatusMap[item.clearingStatus] || "";

                        return item;
                        /*
                            支付状态:00-待支付 05-资金业务处理中 07-已退汇 08-已匹配，待清算平台资金业务处理 13-疑似命中黑名单（待确认） 14-命中黑名单（待退汇）
                            清算状态:001-已入账（结算账户) 002-已入账（待核查账户) 003-已退汇 004-资金业务处理中
                        */
                    });
                    self.searchParam.total = data.data.data.total;
                }
            }).catch(function (err) {
                console.log(err)
            })
        },

        handleCurrentChange(pageIndex) {
            this.searchParam.page = pageIndex;
            this.getList();
        },

        // 付款单编号信息弹框
        handlePaymentNo(item) {
            let self  = this;
            instance({
                url: apiUrls.receive.paymentInfo,
                method: 'post',
                params: {
                    paymentNo: item.paymentNo
                }
            }).then(function(data) {
                    console.log("success...");
                    if(data.data.success) {
                        self.paymentInfo = data.data.data;
                        self.paymentInfoVisible = true;
                    }
                    self.paymentInfoVisible = true;
                });
        },

        handleCommited(msg) {
            // this.$message("操作成功！");
            this.$alert(msg, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    this.visible = false;
                    this.handleSearch();
                }
            });
        },

        handleRefreshStatus() {
            let self = this;
            instance({
                url: apiUrls.receive.freshStatus,
                method: "post",
            }).then((res)=>{
                this.getList();
            });
        }
    },
    created() {
        this.handleSearch();

        //this.getShopList();
    },
    computed: {
        totalAmount() {
            if(this.list && this.list.length) {
                return this.list[0].totalAmount;
            }

            return '';
        }
    }
}
</script>

<style scoped>
.el-date-editor {
    width: 100%;
}
</style>
<style>
.payment-info .el-form-item {
    margin-bottom: 0;
}
.payment-info .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
}
</style>
